<template>
  <div class="seller">
    <div class="header">
      <span class="store-name" :title="store.storeName">{{store.storeName}}</span>
      <i class="iconfont ico-concant" @click="onContactShop(goods.id, goods.goodsMainPhoto, goods.goodsName)"></i>
    </div>
    <div class="seller-container">
      <!-- <div class="seller-logo">
        <img v-lazy="store.storeLogo" alt="商家头像">
      </div> -->
      <!-- <div class="seller-location" :title="store.storeArea">所在地：{{store.storeArea}}</div> -->
      <div class="seller-btns">
        <router-link :to="shopLink" target="_blank">
          <div class="entry-seller"><i class="iconfont ico-home"></i> 进入店铺</div>
        </router-link>
        <div class="collect-seller" @click="collectStore"><i class="iconfont ico-startfull"></i> {{collectedWord}}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入公共方法
import { windowScroll } from '../../../common/util.js'

// 导入收藏店铺模块
import { apiFavoriteStore } from '../../../common/api.js'

// 全局作用域
import app from '../../../main'
import { mapGetters, mapMutations } from 'vuex'

export default {
  props: {
    store: {
      type: Object,
      default: () => { return {} }
    },
    goods: [Object]
  },
  computed: {
    ...mapGetters(['token']),
    // 商家链接
    shopLink() {
      return `/shop/${this.store.storeId}`
    },

    // 是否被收藏了
    collectedWord() {
      // 已经被收藏了
      if (this.store.isCollect == 1) {
        return '已收藏'
      }
      return '收藏店铺'
    }
  },
  mounted() {
    setTimeout(() => {
      // 店家组件
      let sellerObj = $('.seller .header')

      // 店家主题内容
      let container = $('.seller .seller-container')

      // 店家组件的高度
      let sellerTop = sellerObj.offset().top

      // 初始化页面滚动方法
      windowScroll.init()

      // 设置回调方法
      windowScroll.setCallBack(() => {
        // 如果菜单滚动到看不见了，则置顶显示
        if ($(window).scrollTop() >= sellerTop - 1) {
          // 店家头部置顶显示
          sellerObj.addClass('top')

          // 主体内容在上方空出60px的距离
          container.addClass('mt50')
        }

        // 如果页面滚动下来了，则tab选项不置顶显示
        if (container.offset().top > ($(window).scrollTop() + 50)) {
          // 店家头部不置顶显示
          sellerObj.removeClass('top')

          // 删除主体内容在上方空出的距离
          container.removeClass('mt50')
        }
      })
    }, 600)
  },
  methods: {
    ...mapMutations(['selectJIMUser']),
    /**
     * 收藏店铺
     */
    collectStore() {
      // 店铺id
      let storeId = '' + this.store.storeId

      // 请求接口，将当前店铺加入收藏
      apiFavoriteStore(storeId, this.token).then((data) => {
        // 当前是收藏
        if (data.deleteStatus === 0) {
          app.$toast('收藏店铺成功')
        } else {
          app.$toast('已取消收藏店铺')
        }

        // 刷新店铺数据
        this.$emit('refress')
      })
    },
    // 和商家店铺聊天
    onContactShop(goodsId, goodsImg, goodsName) {
      if (!this.$store.getters.token) {
        this.$toast('亲，请先登录', () => {
          this.$router.push('/login')
        })
        return
      }
      const _this = this
      this.$store.dispatch('fetchUserRole', {
        token: this.$store.getters.token,
        callback(role) {
          _this.$store.dispatch('fetchCustomerByStoreId', {
            mobile: _this.$store.getters.mobile,
            storeId: _this.store.storeId,
            goodsId: goodsId,
            firstMsg: JSON.stringify({
              'id': goodsId,
              'goods_main_photo': goodsImg,
              'goodsName': goodsName
            })
          })
          // if (role != 2) {
          //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
          // } else {
          //   _this.$store.dispatch('fetchCustomerByStoreId', {
          //     mobile: _this.$store.getters.mobile,
          //     storeId: _this.store.storeId,
          //     goodsId: goodsId,
          //     firstMsg: JSON.stringify({
          //       'id': goodsId,
          //       'goods_main_photo': goodsImg,
          //       'goodsName': goodsName
          //     })
          //   })
          // }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .mt50 {
    margin-top: 50px;
  }
 .seller {
  border: 1px solid #DDDDDD;
  font-size: 12px;
  width: 190px;

  .header {
    border-bottom: 1px solid #DDDDDD;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding: 0px 8px;

    .store-name {
      display: inline-block;
      width: 152px;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.top {
      background: #FFFFFF;
      border-bottom: 0px;
      border-left: 1px solid #DDDDDD;
      border-right: 1px solid #DDDDDD;
      cursor: pointer;
      position: fixed;
      margin-left: -1px;
      width: 190px;
      top: 0px;
      z-index: 20;
    }

    .iconfont {
      color: #f10b88;
      cursor: pointer;
      float: right;
      font-size: 18px;
    }
  }
  .seller-container {
    padding: 12px 8px;

    .seller-logo {
      border: 1px solid #DDDDDD;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    .seller-location {
      margin-top: 20px;
      margin-bottom: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .seller-btns {
      div {
        background-color: #F6F6F6;
        border: 1px solid #DDDDDD;
        border-radius: 2px;
        cursor: pointer;
        width: 82px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .connect-seller {
        background-color: white;
        border: 1px solid #F00384;
        color: #F00384;
        width: 70px;
        height: 26px;
        line-height: 26px;
        margin-bottom: 12px;
      }
      .collect-seller {
        display: inline-block;
      }
      .entry-seller {
        display: inline-block;
        margin-right: 3px;
      }
      .iconfont {
        color: #f10b88;
      }
    }
  }
 }
</style>